<template>
  <div style="padding-top: 15px">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="108px"
    >
      <el-form-item label="定时更新" prop="issue">
        <el-input
          v-model="time"
          placeholder="如为空则不更新（单位秒)"
          clearable
          @blur="setRefreash()"
        />
      </el-form-item>
      <el-form-item label="期数" prop="issue">
        <el-input
          v-model="queryParams.issue"
          placeholder="请输入期数"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="app-container">
      <el-card>
        <div class="d-flex-jsb">
          <h2>概览</h2>
        </div>
        <el-row>
          <el-col :span="24">
            <div class="d-flex first-record">
              <span>最近一局宝石数量排行</span>
              <span
                v-for="(d, i) in firstRecord"
                :class="{ b: i === 0, s: i === 7 }"
                :key="i"
                >{{ d.key }}/{{ d.val }}</span
              >
            </div>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row :gutter="20" style="margin-top: 5px" class="s">
          <el-col :span="4"
            >最低上次被杀：{{
              minTotal.length ? `第${minTotal[0].i + 1}局` : "暂无最低被杀记录"
            }}</el-col
          >
          <el-col :span="4"
            >最低上次被连杀：{{
              minLiansha.length ? `第${minLiansha[0].i}局` : "暂无最低连杀记录"
            }}</el-col
          >
          <el-col :span="4">近100局最低被杀率：{{ minTotal.length }}%</el-col>
          <el-col :span="4">近100局最低连杀率：{{ minLiansha.length }}%</el-col>
          <el-col :span="4">最低已连胜：{{ zuidiLiansheng }}局</el-col>
          <el-col :span="4"></el-col>
        </el-row>
        <el-row :gutter="20" class="b" style="margin-top: 5px">
          <el-col :span="4"
            >最高上次被杀：{{
              maxTotal.length ? `第${maxTotal[0].i + 1}局` : "暂无最高被杀记录"
            }}</el-col
          >
          <el-col :span="4"
            >最高上次被连杀：{{
              maxLiansha.length ? `第${maxLiansha[0].i + 1}局` : "暂无最高连杀记录"
            }}</el-col
          >
          <el-col :span="4">近100局最高被杀率：{{ maxTotal.length }}%</el-col>
          <el-col :span="4">近100局最高连杀率：{{ maxLiansha.length }}%</el-col>
          <el-col :span="4">最高已连胜：{{ zuigaoLiansheng }}局</el-col>
          <el-col :span="4"></el-col>
        </el-row>
      </el-card>
      <el-table style="margin-top: 20px" v-loading="loading" :data="recordList">
        <el-table-column label="序号" align="center" type="index" width="50" />
        <el-table-column label="期数" align="center" prop="issue" />
        <el-table-column label="总投入数" align="center" prop="totalMedal" />
        <el-table-column label="总用户数" align="center" prop="userCount" />
        <el-table-column label="被噶房间" align="center" prop="killer">
          <template slot-scope="scope">
            {{ getRoomName(scope.row.killer) }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="房间号" align="center" prop="roomNumber1" /> -->
        <el-table-column label="杂物间人数" align="center" prop="userCount1">
        </el-table-column>
        <el-table-column label="杂物间宝石数量" align="center" prop="userTotalMedal1">
          <template slot-scope="scope">
            <div
              :class="
                killNum(scope.row.killer, scope.row.roomNumber1) ? 'kill-class' : ''
              "
            >
              <template v-if="getMinData(scope.row, scope.row.userTotalMedal1)">
                <span
                  :class="
                    getMinData(scope.row, scope.row.userTotalMedal1) ? 'min-class' : ''
                  "
                >
                  {{ scope.row.userTotalMedal1 }}
                </span>
              </template>
              <template v-else-if="getMaxData(scope.row, scope.row.userTotalMedal1)">
                <span
                  :class="
                    getMaxData(scope.row, scope.row.userTotalMedal1) ? 'max-class' : ''
                  "
                >
                  {{ scope.row.userTotalMedal1 }}
                </span>
              </template>
              <template v-else>
                <span>
                  {{ scope.row.userTotalMedal1 }}
                </span>
              </template>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="休息室人数" align="center" prop="userCount2">
        </el-table-column>
        <el-table-column label="休息室宝石数量" align="center" prop="userTotalMedal2">
          <template slot-scope="scope">
            <div
              :class="
                killNum(scope.row.killer, scope.row.roomNumber2) ? 'kill-class' : ''
              "
            >
              <template v-if="getMinData(scope.row, scope.row.userTotalMedal2)">
                <span
                  :class="
                    getMinData(scope.row, scope.row.userTotalMedal2) ? 'min-class' : ''
                  "
                >
                  {{ scope.row.userTotalMedal2 }}
                </span>
              </template>
              <template v-else-if="getMaxData(scope.row, scope.row.userTotalMedal2)">
                <span
                  :class="
                    getMaxData(scope.row, scope.row.userTotalMedal2) ? 'max-class' : ''
                  "
                >
                  {{ scope.row.userTotalMedal2 }}
                </span>
              </template>
              <template v-else>
                <span>
                  {{ scope.row.userTotalMedal2 }}
                </span>
              </template>
            </div>
          </template>
        </el-table-column>
        <el-table-column label=" 厂长室人数" align="center" prop="userCount3">
        </el-table-column>
        <el-table-column label="厂长室宝石数量" align="center" prop="userTotalMedal3">
          <template slot-scope="scope">
            <div
              :class="
                killNum(scope.row.killer, scope.row.roomNumber3) ? 'kill-class' : ''
              "
            >
              <template v-if="getMinData(scope.row, scope.row.userTotalMedal3)">
                <span
                  :class="
                    getMinData(scope.row, scope.row.userTotalMedal3) ? 'min-class' : ''
                  "
                >
                  {{ scope.row.userTotalMedal3 }}
                </span>
              </template>
              <template v-else-if="getMaxData(scope.row, scope.row.userTotalMedal3)">
                <span
                  :class="
                    getMaxData(scope.row, scope.row.userTotalMedal3) ? 'max-class' : ''
                  "
                >
                  {{ scope.row.userTotalMedal3 }}
                </span>
              </template>
              <template v-else>
                <span>
                  {{ scope.row.userTotalMedal3 }}
                </span>
              </template>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="谈话室人数" align="center" prop="userCount4">
        </el-table-column>
        <el-table-column label="谈话室宝石数量" align="center" prop="userTotalMedal4">
          <template slot-scope="scope">
            <div
              :class="
                killNum(scope.row.killer, scope.row.roomNumber4) ? 'kill-class' : ''
              "
            >
              <template v-if="getMinData(scope.row, scope.row.userTotalMedal4)">
                <span
                  :class="
                    getMinData(scope.row, scope.row.userTotalMedal4) ? 'min-class' : ''
                  "
                >
                  {{ scope.row.userTotalMedal4 }}
                </span>
              </template>
              <template v-else-if="getMaxData(scope.row, scope.row.userTotalMedal4)">
                <span
                  :class="
                    getMaxData(scope.row, scope.row.userTotalMedal4) ? 'max-class' : ''
                  "
                >
                  {{ scope.row.userTotalMedal4 }}
                </span>
              </template>
              <template v-else>
                <span>
                  {{ scope.row.userTotalMedal4 }}
                </span>
              </template>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="洗衣房人数" align="center" prop="userCount5">
        </el-table-column>
        <el-table-column label="洗衣房宝石数量" align="center" prop="userTotalMedal5">
          <template slot-scope="scope">
            <div
              :class="
                killNum(scope.row.killer, scope.row.roomNumber5) ? 'kill-class' : ''
              "
            >
              <template v-if="getMinData(scope.row, scope.row.userTotalMedal5)">
                <span
                  :class="
                    getMinData(scope.row, scope.row.userTotalMedal5) ? 'min-class' : ''
                  "
                >
                  {{ scope.row.userTotalMedal5 }}
                </span>
              </template>
              <template v-else-if="getMaxData(scope.row, scope.row.userTotalMedal5)">
                <span
                  :class="
                    getMaxData(scope.row, scope.row.userTotalMedal5) ? 'max-class' : ''
                  "
                >
                  {{ scope.row.userTotalMedal5 }}
                </span>
              </template>
              <template v-else>
                <span>
                  {{ scope.row.userTotalMedal5 }}
                </span>
              </template>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="工作室人数" align="center" prop="userCount6">
        </el-table-column>
        <el-table-column label="工作室宝石数量" align="center" prop="userTotalMedal6">
          <template slot-scope="scope">
            <div
              :class="
                killNum(scope.row.killer, scope.row.roomNumber6) ? 'kill-class' : ''
              "
            >
              <template v-if="getMinData(scope.row, scope.row.userTotalMedal6)">
                <span
                  :class="
                    getMinData(scope.row, scope.row.userTotalMedal6) ? 'min-class' : ''
                  "
                >
                  {{ scope.row.userTotalMedal6 }}
                </span>
              </template>
              <template v-else-if="getMaxData(scope.row, scope.row.userTotalMedal6)">
                <span
                  :class="
                    getMaxData(scope.row, scope.row.userTotalMedal6) ? 'max-class' : ''
                  "
                >
                  {{ scope.row.userTotalMedal6 }}
                </span>
              </template>
              <template v-else>
                <span>
                  {{ scope.row.userTotalMedal6 }}
                </span>
              </template>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="茶水间人数" align="center" prop="userCount7">
        </el-table-column>
        <el-table-column label="茶水间宝石数量" align="center" prop="userTotalMedal7">
          <template slot-scope="scope">
            <div
              :class="
                killNum(scope.row.killer, scope.row.roomNumber7) ? 'kill-class' : ''
              "
            >
              <template v-if="getMinData(scope.row, scope.row.userTotalMedal7)">
                <span
                  :class="
                    getMinData(scope.row, scope.row.userTotalMedal7) ? 'min-class' : ''
                  "
                >
                  {{ scope.row.userTotalMedal7 }}
                </span>
              </template>
              <template v-else-if="getMaxData(scope.row, scope.row.userTotalMedal7)">
                <span
                  :class="
                    getMaxData(scope.row, scope.row.userTotalMedal7) ? 'max-class' : ''
                  "
                >
                  {{ scope.row.userTotalMedal7 }}
                </span>
              </template>
              <template v-else>
                <span>
                  {{ scope.row.userTotalMedal7 }}
                </span>
              </template>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="音乐室人数" align="center" prop="userCount8">
        </el-table-column>
        <el-table-column label="音乐室宝石数量" align="center" prop="userTotalMedal8">
          <template slot-scope="scope">
            <div
              :class="
                killNum(scope.row.killer, scope.row.roomNumber8) ? 'kill-class' : ''
              "
            >
              <template v-if="getMinData(scope.row, scope.row.userTotalMedal8)">
                <span
                  :class="
                    getMinData(scope.row, scope.row.userTotalMedal8) ? 'min-class' : ''
                  "
                >
                  {{ scope.row.userTotalMedal8 }}
                </span>
              </template>
              <template v-else-if="getMaxData(scope.row, scope.row.userTotalMedal8)">
                <span
                  :class="
                    getMaxData(scope.row, scope.row.userTotalMedal8) ? 'max-class' : ''
                  "
                >
                  {{ scope.row.userTotalMedal8 }}
                </span>
              </template>
              <template v-else>
                <span>
                  {{ scope.row.userTotalMedal8 }}
                </span>
              </template>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { listRecord, getRecord, listTotal } from "@/api/record";
let timer = null;
export default {
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        issue: "",
      },
      zuigaoLiansheng: "",
      zuidiLiansheng: "",
      columns: [],
      showSearch: true,
      recordList: [],
      form: {},
      minTotal: [],
      minLiansha: [],
      loading: false,
      maxTotal: [],
      maxLiansha: [],
      firstRecord: [],
      time: "",
    };
  },

  created() {
    this.time = "";
    clearInterval(timer);
    this.getList();
  },

  computed: {
    max() {
      // return this.maxTotal.lengt
    },
  },

  methods: {
    setRefreash() {
      let time = this.time.replace(/[^\d]/g, "");
      if (time) {
        clearInterval(timer);
        this.$message.success("已设置为" + time + "秒刷新一次");
        timer = setInterval((d) => {
          this.getList();
        }, time * 1000);
      } else {
        clearInterval(timer);
      }
    },
    getListTotal() {
      listTotal({
        count: 100,
        issue: this.recordList[0].issue,
      }).then((res) => {
        this.totalData = res.rows;
      });
    },
    /** 查询【请填写功能名称】列表 */
    getList() {
      this.loading = true;
      listRecord(this.queryParams).then((response) => {
        this.recordList = response.rows;
        // this.total = response.total;
        this.loading = false;

        let maxList = response.rows.map((d, i) => {
          let list = [];
          for (let i = 1; i <= 8; i++) {
            list.push(parseFloat(d["userTotalMedal" + i]));
          }
          let max = this.getMaxData(d);
          let min = this.getMinData(d);
          let maxIndex = list.findIndex(d => parseFloat(d) === max);
          let minIndex = list.findIndex(d => parseFloat(d) === min);
          return {
            killed: d["userTotalMedal" + d.killer],
            max,
            min,
            maxKey: 'userTotalMedal' + maxIndex,
            minKey: 'userTotalMedal' + minIndex,
            i,
          };
        });

        // 计算最高的被杀率和连杀率
        this.maxTotal = maxList.filter((d) => d.max === parseFloat(d.killed));
        this.maxTotal.forEach((d, i) => {
          if (i !== 0) {
            if (d.i - this.maxTotal[i - 1].i === 1) {
              this.maxLiansha.push(d);
            }
          }
        });

        // 计算最低的被杀率和连杀率
        this.minTotal = maxList.filter((d) => d.min === parseFloat(d.killed));
        this.minTotal.forEach((d, i) => {
          if (i !== 0) {
            if (d.i - this.minTotal[i - 1].i === 1) {
              this.minLiansha.push(d);
            }
          }
        });

        this.zuigaoLiansheng = this.getZuigaoOrZuidiLiansheng(
          maxList,
          "maxKey"
        );
        this.zuidiLiansheng = this.getZuigaoOrZuidiLiansheng(
          maxList,
          "minKey"
        );
        // response.rows.map(d => )

        this.handPrevRecord(response.rows[0]);
      });
    },

    /**
     * 计算最高或者最低连胜
     */
    getZuigaoOrZuidiLiansheng(maxList, type = "maxKey") {
      let first = maxList[0];
      let count = 0;
      for (let i = 1; i < maxList.length; i++) {
        if (maxList[i][type] !== first[type]) {
          count = i;
          break;
        }
      }

      return count;
    },

    handPrevRecord(last) {
      // 生成冒泡排序
      let list = [];
      for (let i = 1; i <= 8; i++) {
        list.push({
          val: last["userTotalMedal" + i],
          key: last["roomName" + i],
        });
      }

      this.firstRecord = list.sort((a, b) => a.val - b.val).reverse();
    },

    killNum(killNum, data) {
      return killNum == data;
    },
    getMaxData(list, data) {
      const minData = Math.max(
        list["userTotalMedal1"],
        list["userTotalMedal2"],
        list["userTotalMedal3"],
        list["userTotalMedal4"],
        list["userTotalMedal5"],
        list["userTotalMedal6"],
        list["userTotalMedal7"],
        list["userTotalMedal8"]
      );
      if (data) return minData == data;
      else return minData;
    },
    getMinData(list, data) {
      const minData = Math.min(
        list["userTotalMedal1"],
        list["userTotalMedal2"],
        list["userTotalMedal3"],
        list["userTotalMedal4"],
        list["userTotalMedal5"],
        list["userTotalMedal6"],
        list["userTotalMedal7"],
        list["userTotalMedal8"]
      );
      if (data) return minData == data;
      else return minData;
    },
    getRoomName(data) {
      const name = {
        1: "杂物间",
        2: "休息室",
        3: "厂长室",
        4: "谈话室",
        5: "洗衣房",
        6: "工作室",
        7: "茶水间",
        8: "音乐室",
      };
      return name[data];
    },

    handleQuery() {
      this.getList();
    },

    resetQuery() {},
  },

  beforeDestroy() {
    clearInterval(timer);
  },
};
</script>

<style lang="scss" scoped>
.min-class {
  background-color: aquamarine;
  border-radius: 3px;
  padding: 0 5px;
}

.kill-class {
  background-color: red;
  border-radius: 3px;
}

.max-class {
  background-color: blueviolet;
  border-radius: 3px;
  color: #fff;
}

.s {
  font-size: 14px;
  color: rgb(53, 201, 152);
}

.b {
  font-size: 14px;
  color: blueviolet;
}

.d-flex {
  display: flex;
  align-items: center;
}

.d-flex-jsb {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.first-record {
  font-size: 14px;
}

.first-record span {
  //   padding: 0 10px;
  margin-right: 20px;
}
</style>
